<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//要求，定义个公共的方法，能够实现只需要接收要互换的两个节点，
			//然后调用这个方法，节点实现互换
			window.onload=function(){
				function ab(node1,node2){
						//获取node1和node2父类节点
				var node1Parent=node1.parentNode;
			    var node2Parent=node2.parentNode;
					if (node1Parent&&node2Parent) {
					
					//克隆node1和node2
			var clone1=node1.cloneNode(true);
			var clone2=node2.cloneNode(true);
			   
			node1Parent.replaceChild(clone2,node1)
			 node2Parent.replaceChild(clone1,node2)
			 }else{
			 	console.log("交换失败");
			 	return;
			 }
			  }	
			  var sh=document.getElementById("SH")
				var rl=document.getElementById("rl")
				var button1=document.getElementById("button1")
				button1.onclick=function(){
					ab(sh,rl)
				}
			}
		
				
			
			
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li id="SH">上海</li>
			<li id="dongjing">东京</li>
			<li>首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<button id="button1">交换</button>
	</body>
</html>
